<template>
  <div
    class="mt-[25px] safe-calendar-page flex justify-around items-center"
    :class="!isBlackTheme ? 'white-theme' : ''"
  >
    <div :loading="loading">
      <div class="calendar-grid" v-if="monthList.length">
        <div v-for="(month, idx) in monthList" :key="idx" class="calendar-item">
          <el-calendar :model-value="month">
            <template #date-cell="{ data }">
              <div
                v-if="data?.type === 'current-month'"
                :class="getDayClass(data)"
                class="date-cell"
              >
                {{ data?.day?.split("-")[2] ?? "" }}
              </div>
              <div v-else></div>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
    <div class="flex items-center lh-[38px] flex-col">
      <div class="text-left title">
        <div class="text-left">自2025年4月5日起，</div>
        <div class="text-left">
          公司安全生产<el-statistic
            v-if="source !== 0"
            :value="outputValue"
            class="statistic-num"
          />
          <div v-else class="statistic-num">
            <div class="el-statistic__number">0</div>
          </div>
          天，
        </div>
        <div class="text-left">
          历史最高纪录<el-statistic
            v-if="source1 !== 0"
            :value="outputValue1"
            class="statistic-num"
          />
          <div v-else class="statistic-num">
            <div class="el-statistic__number">0</div>
          </div>
          天
        </div>
      </div>
      <div class="legend text-left">
        <div class="text-left">
          <span class="legend-item safe"></span>
          <span class="pr-[10px] c-[#eee]">安全日</span>
          <span class="legend-item normal"></span>
          <span class="pr-[10px] c-[#eee]">一般安全事故</span>
        </div>
        <div class="text-left">
          <span class="legend-item danger"></span>
          <span class="pr-[0px] c-[#eee]">休业安全事故</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { useTransition } from "@vueuse/core";
import request from "@/utils/request";

const props = defineProps({
  isBlackTheme: {
    type: Boolean,
    default: () => {
      return true;
    },
  },
  second: {
    type: Number,
    default: () => {
      return 1000 * 60 * 10;
    },
  },
});

const { isBlackTheme, second } = toRefs(props);

const source = ref(0);
const outputValue = useTransition(source, {
  duration: 1000,
});

const source1 = ref(0);
const outputValue1 = useTransition(source1, {
  duration: 1000,
});

// 生成今年的12个月份
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const monthList = ref(getMonth());

function getMonth() {
  let fileList = [];
  fileList = [new Date(year, month, 1)];
  return fileList;
}

// 假设有事故的日期（可根据实际数据替换）
// const normalAccidents = ref([`${year}-03-15`, `${year}-07-10`]);
// const dangerAccidents = ref([
//   `${year}-05-20`,
//   `${year}-09-05`,
//   `${year}-12-25`,
// ]);
const normalAccidents = ref([]);
const dangerAccidents = ref([]);

// 根据日期返回样式
function getDayClass(data: any) {
  if (dayjs(data.day).isAfter(dayjs())) {
    return "future";
  }
  if (data.type === "current-month" && !dayjs(data.day).isAfter(dayjs())) {
    if (dangerAccidents.value.includes(data.day)) return "danger";
    if (normalAccidents.value.includes(data.day)) return "normal";
    return "safe";
  }

  return "";
}

const loading = ref(false);
async function handleSearch() {
  loading.value = true;
  const { data } = await request({
    url: `/mes/messafetyproductionday/getCurrentDay`,
    method: "post",
    data: {},
  }).finally(() => {
    loading.value = false;
  });
  source1.value = data?.maxDay ?? 0;
  source.value = data?.currentDay ?? 0;
  normalAccidents.value = data.normalAccidents ?? [];
  dangerAccidents.value = data.dangerAccidents ?? [];
}

onMounted(() => {
  handleSearch();
});

// 定时刷新
let timer: any = ref(null);
// 大屏切换处理方法
function handleScreenData() {
  clearInterval(timer.value);
  timer.value = null;

  timer.value = setInterval(() => {
    handleSearch();
    // 重复调用组件的重新获取方法
  }, second.value);
}

onMounted(() => {
  handleSearch();
  handleScreenData();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style scoped lang="scss">
.safe-calendar-page {
  //   background: #0a2250;
  max-height: 100%;
  color: #fff;
  padding: 0px;
  overflow-y: auto;
}
.title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 18px;
  font-family: YOUSHE;
  font-weight: 400;
  margin-top: 0px;
  width: 240px;
  padding-right: 5px;
}
.calendar-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 10px;
  margin-bottom: 0px;
}
.calendar-item {
  width: 250px;
  background: transparent;
  //   border: 1px solid #333;
  background-color: rgba(95, 156, 268, 0.12);
  border-radius: 20px;
}
.el-calendar {
  //   background: #113983;
  //   background: radial-gradient(#01102e, transparent);
  background-color: transparent;
  --el-calendar-cell-width: 28px;
  --el-calendar-cell-height: 26px;
}

:deep(.el-calendar) {
  font-family: DINPro;
  .el-calendar-table td.is-selected {
    background-color: transparent !important;
  }
  .el-calendar-table .el-calendar-day {
    padding: 0;
    display: flex;
    align-items: center;
  }
  --el-calendar-border: none;
  .el-calendar-table thead th {
    color: #4e84f1;
    font-weight: 600;
    padding: 0px 0 5px;
    font-size: 15px;
  }
  .el-calendar__header {
    // padding-bottom: 0px !important;
    font-size: 18px;
    padding: 10px 20px 3px !important;
  }
  .el-calendar__body {
    padding: 3px 10px 10px;

    td {
      border: none !important;
    }
  }
  .el-calendar-table .el-calendar-day:hover {
    background: #1252f8 !important;
    .date-cell {
      background: #1252f8 !important;
      color: #fff !important;
    }
  }
  .el-calendar__button-group {
    display: none;
  }
}
.date-cell {
  width: 97%;
  height: 97%;
  line-height: 28px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  transition: background 0.2s;
  font-family: DINPro;
}
.safe {
  background: #7fffd4;
  color: #222;
}
.normal {
  background: #ffd580;
  color: #222;
}
.danger {
  background: #ff4d4f;
  color: #fff;
}
.future {
  font-weight: 400 !important;
  color: #999 !important;
}
.legend {
  margin-top: 20px;
  font-size: 13px;
  margin-left: -30px;
  // line-height: 22px;
  //   font-weight: 600;
}
.legend > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  line-height: 26px;
}
.legend-item {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 22px;
  border-radius: 4px;
  margin-right: 0px;
  vertical-align: middle;
}
.legend-item.safe {
  background: #7fffd4;
}
.legend-item.normal {
  background: #ffd580;
}
.legend-item.danger {
  background: #ff4d4f;
}

:deep(.statistic-num) {
  display: inline-block;
  .el-statistic__number {
    font-size: 24px;
    font-weight: 600;
    color: #0cecb4;
    font-family: YOUSHE;
    display: inline-block;
    width: 65px;
    text-align: center;
  }
}
.white-theme {
  padding: 0 10px;
  .title {
    color: #333;
  }
  :deep(.calendar-item) {
    border: 1px solid #c0c4cc;
    border-radius: 8px;
    background-color: #fff !important;
  }
  :deep(.el-calendar-table thead th) {
    color: #333;
    font-family: DINLight;
    font-weight: 400;
  }
  :deep(.el-calendar__header) {
    color: #333;
    background-color: #e6eaf1b2;
    padding: 6px 20px 5px !important;
    margin-bottom: 3px;
  }
  :deep(.el-calendar) {
    .date-cell {
      font-family: DINLight;
    }
  }
  .legend {
    color: #333;
    font-size: 14px;
  }
}
</style>
